<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script>
        let msg = "Hello Vue";
        // Model --> View
        window.onload = function(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");

            // View --> Model
            // 监听了input组件输入的内容
            // 当文本框发生改变之后
            // 将对应的Model中数据同步改变
            // 当Model发生改变之后,View也会随之改变
            inText.oninput = function(){
                msg = this.value;
                console.log("当前Model的数据:"+msg)
                s1.innerHTML = msg;
            };
        }
    </script>
</head>
<body>
<div>
    <span id="s1"></span><br/>
    <input type="text" id="inText">
</div>
</body>
</html>